<template>
  <div class="medicine_type_list">
    <!--药品类别列表操作 -->
    <el-row class="medicineType_operation">
      <el-col :span="20">
        <div class="title">药品类别列表</div>
      </el-col>
      <el-col :span="4">
        <el-tooltip class="item" effect="light" content="添加" placement="top">
          <el-button type="primary" class="iconfont icon-tianjia" @click="showAddMedicineType = true" circle></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="light" content="修改" placement="top">
          <el-button type="warning" class="iconfont icon-xiugai" @click="editMedicineTypePopups" circle></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="light" content="删除" placement="top">
          <el-button type="danger" class="iconfont icon-changyonggoupiaorenshanchu" @click="deleteMedicineTypePopups" circle></el-button>
        </el-tooltip>
      </el-col>
    </el-row>
    <!-- 药品类别列表列表 -->
    <el-table
        :data="medicineTypeList"
        border
        @selection-change="selectTarget"
    >
      <el-table-column type="selection" width="60"/>
      <el-table-column prop="type" label="药品类别"/>
      <el-table-column prop="description" label="描述" width="720px"/>
      <el-table-column prop="level" label="药品等级"/>
    </el-table>
    <!-- 员工分页 -->
    <el-pagination
        @size-change="handleMedicineTypeTableSizeChange"
        @current-change="handleMedicineTypeTableCurrentChange"
        :current-page="medicineTypePageList.currentPage"
        :page-sizes="[5, 10, 15, 20, 30]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="medicineTypeTotal">
    </el-pagination>
    <!-- 添加药品类别弹出层 -->
    <el-dialog  title="添加药品类别" :visible.sync="showAddMedicineType" width="40%" @close="handleCloseAddMedicineType" append-to-body>
        <el-form :model="addMedicineTypeForm" ref="addMedicineTypeFormRef" :rules="addMedicineTypeFormRules">
            <!-- 药品类别 -->
            <el-form-item prop="type">
                <el-input placeholder="请输入药品类别" v-model="addMedicineTypeForm.type" clearable>
                  <template slot="prepend">药品类别</template>
                </el-input>
            </el-form-item>
            <!-- 药品等级 -->
            <el-form-item prop="level">
              <el-select clearable placeholder="请选择药品等级" v-model="addMedicineTypeForm.level">
                <el-option key="一级" label="一级" value="一级"></el-option>
                <el-option key="二级" label="二级" value="二级"></el-option>
                <el-option key="三级" label="三级" value="三级"></el-option>
                <el-option key="四级" label="四级" value="四级"></el-option>
                <el-option key="五级" label="五级" value="五级"></el-option>
              </el-select>
            </el-form-item>
            <!-- 药品描述 -->
            <el-form-item prop="description">
              <el-input :rows="4" class="description" placeholder="请输入药品类别描述" type="textarea" v-model="addMedicineTypeForm.description"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer">
            <el-button @click="showAddMedicineType = false">取 消</el-button>
            <el-button type="primary" @click="addMedicineType">确 认</el-button>
        </span>
    </el-dialog>
    <!-- 修改药品类别弹出层 -->
    <el-dialog  title="修改药品类别" :visible.sync="showEditMedicineType" width="40%" append-to-body>
        <el-form :model="editMedicineTypeForm" ref="editMedicineTypeForm" :rules="editMedicineTypeFormRules">
            <!-- 药品类别名称 -->
            <el-form-item prop="type">
                <el-input placeholder="请输入药品类别名称" v-model="editMedicineTypeForm.type" clearable>
                  <template slot="prepend">药品类别名称</template>
                </el-input>
            </el-form-item>
            <!-- 药品等级 -->
            <el-form-item prop="level">
              <el-select clearable placeholder="请选择药品等级" v-model="editMedicineTypeForm.level">
                <el-option key="一级" label="一级" value="一级"></el-option>
                <el-option key="二级" label="二级" value="二级"></el-option>
                <el-option key="三级" label="三级" value="三级"></el-option>
                <el-option key="四级" label="四级" value="四级"></el-option>
                <el-option key="五级" label="五级" value="五级"></el-option>
              </el-select>
            </el-form-item>
            <!-- 药品描述 -->
            <el-form-item prop="description">
              <el-input :rows="4" placeholder="请输入药品类别描述" type="textarea" v-model="editMedicineTypeForm.description"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer">
            <el-button @click="showEditMedicineType = false">取 消</el-button>
            <el-button type="primary" @click="editMedicineType">确 认</el-button>
        </span>
    </el-dialog>
    <!-- 删除药品类别弹出层 -->
    <el-dialog title="删除药品类别" :visible.sync="showDeleteMedicineType" width="30%" append-to-body>
      <el-row>
          <el-col :span="3">
            <svg t="1652248818186" class="icon" viewBox="0 0 1040 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4020" width="32" height="32"><path d="M133.534106 982.154208c-78.393906 0-113.368619-57.111137-77.716004-126.943393L444.214002 94.571489c35.652615-69.819703 95.023424-70.359514 131.931412-1.200974L983.376105 856.40342c36.916357 69.166909 2.975236 125.759158-75.410301 125.759157H133.534106v-0.008369z" fill="#FFB624" p-id="4021"></path><path d="M203.655099 894.734165c-63.208068 0-91.412132-50.687808-62.668258-112.661425l313.17809-675.060497c28.743874-61.965248 76.619645-62.44229 106.380372-1.062883l328.372297 677.182078c29.764912 61.387776 2.397764 111.611096-60.801936 111.611096H203.655099v-0.008369z" fill="#FFD91C" p-id="4022"></path><path d="M468.442715 376.22296v223.305883c0 28.88615 23.416905 52.30724 52.30724 52.307239 28.88615 0 52.30724-23.42109 52.30724-52.307239V376.22296c0-28.890335-23.42109-52.30724-52.30724-52.30724-28.890335 0-52.30724 23.416905-52.30724 52.30724zM468.442715 765.819834v33.254851c0 28.881965 23.416905 52.30724 52.30724 52.30724 28.88615 0 52.30724-23.425274 52.30724-52.30724v-33.254851c0-28.88615-23.42109-52.30724-52.30724-52.307239-28.890335 0-52.30724 23.42109-52.30724 52.307239z" fill="#6E6E96" p-id="4023"></path><path d="M133.534106 961.231312c-30.354937 0-53.006064-9.687301-63.781356-27.28764s-9.105644-42.180558 4.699283-69.217124l388.3959-760.635141c13.327885-26.103405 30.47629-41.159521 47.051408-41.310166 16.570934-0.150645 33.991337 14.591628 47.787894 40.443958l407.230692 763.032905c14.256861 26.714353 16.407735 50.934698 6.046717 68.20864-10.361018 17.265574-32.727594 26.768753-62.99884 26.768753H133.534106a20.922896 20.922896 0 1 1 0-0.004185z m0 41.849977h774.440067c45.549144 0 80.661948-16.729948 98.881606-47.101623 18.219658-30.37586 16.441212-69.242232-5.013126-109.435115L594.603593 83.520016c-21.701228-40.661556-51.913889-62.89004-85.085048-62.588751-33.171159 0.30129-62.977917 23.07377-83.942659 64.124491L37.179986 845.695081c-20.676006 40.502542-21.784919 79.59488-3.113327 110.100463 18.667408 30.493028 53.98944 47.28156 99.471632 47.28156a20.922896 20.922896 0 0 1-0.004185 0.004185z" fill="#6E6E96" p-id="4024"></path></svg>
          </el-col>
          <el-col :span="21">
            <div class="deleteMedicineTypeMsg">确定要删除这{{selectedMedicineTypeNumber}}条记录吗？</div>
          </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDeleteMedicineType = false">再想想</el-button>
        <el-button type="primary" @click="deleteMedicineType">想好了</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'MedicineTypeList',
    data() {

      /* 手机号表单验证 */
      var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('联系电话不能为空'));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的手机号'));
          }
        }
      };

      return {
        /* 药品类别列表 */
        medicineTypeList: [],
        /* 药品类别表分页信息 */
        medicineTypePageList:{
          pageNo: 1,
          pageSize: 5,
          currentPage: 1,
          type: '',
          level: '',
        },
        /* 药品类别表总条数 */
        medicineTypeTotal: 0,

        /* 选中药品类别个数 */
        selectedMedicineTypeNumber: 0,
        /* 选中药品类别数组 */
        selectedMedicineType: [],

        /* 添加药品类别表单 */
        addMedicineTypeForm: {
          type: '',
          level: '',
          description: '',
          currentUserId: ''
        },
        /* 添加药品类别表单验证 */
        addMedicineTypeFormRules: {
          type: [
            { required: true, message: '请输入药品类别名称', trigger: 'blur' },
          ],
        },
        /* 控制添加药品类别弹出层 */
        showAddMedicineType: false,

        /* 修改药品类别表单 */
        editMedicineTypeForm: {
          type: '',
          level: '',
          description: '',
          currentUserId: ''
        },
        /* 修改药品类别表单验证 */
        editMedicineTypeFormRules: {
          type: [
            { required: true, message: '请输入药品类别名称', trigger: 'blur' },
          ],
        },
        /* 控制修改药品类别弹出层 */
        showEditMedicineType: false,

        /* 删除药品类别id组 */
        deleteMedicineTypeIds: [],
        /* 控制删除药品类别弹出层 */
        showDeleteMedicineType: false,
      }
    },
    methods: {
      /* 复选框选择目标事件回调 */
      selectTarget(selection) {
          this.selectedMedicineTypeNumber =  selection.length
          this.selectedMedicineType = selection
      },

      /* 分页获得药品类别列表 */
      async getMedicineTypePageList(medicineType) {

        if(medicineType != undefined) {
          this.medicineTypePageList.type = medicineType.type
          this.medicineTypePageList.level = medicineType.level
        }


        const { data: res } = await this.$http.post('workbench/medicineType/medicineTypePageList.do',this.medicineTypePageList)
        if (res.code == '1') {
          this.medicineTypeList = res.others
        } else {
          this.$message.error('获取药品类别表失败!')
        }
      },
      /* 获得药品类别列表总条数 */
      async getMedicineTypeTotal() {
          const { data: res } = await this.$http.post('workbench/medicineType/getMedicineTypeTotal.do',this.medicineTypePageList)
          if (res.code == '1') {
            this.medicineTypeTotal = res.number
          } else {
              this.$message.error('获取目标表总条数失败!')
          }
      },
      /* 处理分页每页显示几行 */
      handleMedicineTypeTableSizeChange(val) {
          this.medicineTypePageList.pageSize = val
          this.getMedicineTypeTotal()
          this.getMedicineTypePageList()
      },
      /* 处理分页切换页数 */
      handleMedicineTypeTableCurrentChange(val) {
          this.medicineTypePageList.pageNo = val
          this.getMedicineTypeTotal()
          this.getMedicineTypePageList()
      },

      /* 添加药品类别弹出层关闭回调 */
      handleCloseAddMedicineType() {
        this.$refs['addMedicineTypeFormRef'].resetFields();
      },
      /* 添加药品类别 */
      async addMedicineType() {
        this.$refs.addMedicineTypeFormRef.validate(async valid => {
          if (!valid) return
          const { data: res } = await this.$http.post('workbench/medicineType/addMedicineType.do',this.addMedicineTypeForm)
          if (res.code == '1') {
            this.showAddMedicineType = false
            this.$refs['addMedicineTypeFormRef'].resetFields();
            this.getMedicineTypePageList()
            this.getMedicineTypeTotal()
            this.$message.success('添加药品类别成功!')
          } else {
            this.$message.error('添加药品类别失败!')
          }
        })
      },

      /* 修改药品类别弹出层 */
      editMedicineTypePopups() {
        if(this.selectedMedicineTypeNumber > 1) {
            this.$message.error('只能选择一条记录进行修改!')
            return
        }
        if(this.selectedMedicineTypeNumber < 1) {
            this.$message.error('请选择需要修改的记录!')
            return
        }
        this.editMedicineTypeForm.type = this.selectedMedicineType[0].type
        this.editMedicineTypeForm.id = this.selectedMedicineType[0].id
        this.editMedicineTypeForm.level = this.selectedMedicineType[0].level
        this.editMedicineTypeForm.description = this.selectedMedicineType[0].description

        this.showEditMedicineType = true
      },
      /* 修改药品类别 */
      async editMedicineType() {
        const { data: res } = await this.$http.post('workbench/medicineType/editMedicineType.do',this.editMedicineTypeForm)
          if (res.code == '1') {
            this.getMedicineTypePageList()
            this.getMedicineTypeTotal()
            this.showEditMedicineType = false
            this.$message.success('修改药品类别资料成功!')
          } else {
              this.$message.error('修改用户资料失败!')
          }
      },

      /* 删除药品类别弹出层 */
      deleteMedicineTypePopups() {
        if(this.selectedMedicineTypeNumber < 1) {
            this.$message.error('请选择需要删除的记录!')
            return
        }

        this.showDeleteMedicineType = true
        for (const MedicineType of this.selectedMedicineType) {
            this.deleteMedicineTypeIds.push(MedicineType.id)
        }
      },
      /* 删除药品类别 */
      async deleteMedicineType() {
        const { data: res } = await this.$http.post('workbench/medicineType/deleteMedicineType.do',this.deleteMedicineTypeIds)
        if (res.code == '1') {
          this.showDeleteMedicineType = false
          this.getMedicineTypePageList()
          this.getMedicineTypeTotal()
          this.$message.success('删除药品类别成功!')
        } else {
          this.$message.error('删除药品类别失败!')
        }
      },

      /* 初始化当前登录用户 */
      getCurrentUser() {
        let user = JSON.parse(window.localStorage.getItem('user'))
        this.addMedicineTypeForm.currentUserId = user.id
        this.editMedicineTypeForm.currentUserId = user.id
      },
    },
    created() {
      this.getMedicineTypePageList()
      this.getMedicineTypeTotal()
      this.getCurrentUser()
    },
    mounted() {
      this.$bus.$on('getMedicineTypePageList',this.getMedicineTypePageList)
      this.$bus.$on('getMedicineTypeTotal',this.getMedicineTypeTotal)
    },
    beforeDestroy() {
      this.$bus.$off('getMedicineTypePageList')
      this.$bus.$off('getMedicineTypeTotal')
    }
  }
</script>

<style scoped>
/* 药品类别列表操作 */
.medicineType_operation {
  background-color: #fff;
  margin: 0px 0px;
  height: 70px;
}
.medicineType_operation .title {
  line-height: 70px;
  margin-left: 15px;
  font-weight: bold;
}
.medicineType_operation .el-button {
  margin-top: 15px;
}
/* 药品类别列表 */
.medicine_type_list {
  margin: 0px 20px;
  box-shadow: 0 0 10px rgb(220, 223, 220);
}
/* 药品类别分页 */
.el-pagination {
  text-align: center;
  padding: 15px 0px;
  background-color: #fff;
}
/* 删除目标弹出层样式 */
.deleteMedicineTypeMsg {
    margin-left: 10px;
    line-height: 35px;
    font-size: 18px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
</style>
